<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互</title>
		<!-- 导入js函数类库 -->
		<script src="./jquery-3.6.0.min.js"></script>
		<script>
			//jquery语法：让整个页面在浏览器加载完成之后，再次执行js
			$(function(){
				
				
				/* data参数传递:
					1. 对象方式实现传参
					语法：{key:value,key2:value2}
					例：data:{id:100,name:"tom",age:18}
					2.拼接字符串方式
					语法：key1=value1 & key2 = value2
					例：data:"id=100&name=tom&age=18"
				*/
				//要求从后端获取数据，之后将数据页面列表展现
				$.ajax({
					type:"get",//请求类型
					url:"http://localhost:8090/findAll",//请求地址
					//data:
					//dataType:"json"
					
					//回调函数
					success:function (data){
						//将data中的数据添加到表格中
						
						//java原生写法
						/* for(var i=0;i<data.length;i++){
							console.log(data[i])
						} */
						
						//JS原生函数,in关键字遍历的是下标,从0开始
						/* for(index in data){
								console.log(data[index])
						} */
						
						//JS原生函数,of关键字遍历的是对象
						for(user of data){
							/* let id = user.id
							let name = user.name
							let age = user.age
							let sex = user.sex */
							//let tr = "<tr><td>"+id+"</td></tr>"
							//${对象.属性值}  动态的获取数据
							let tr =`
									<tr align = 'center'>
										<td>${user.id}</td>
										<td>${user.name}</td>
										<td>${user.age}</td>
										<td>${user.sex}</td>
										<td>
											
											<input type='button' value='修改' id="updateBtn"/>
											<button id="deleteBtn">删除</button>
											
										</td>
									</tr>`
							$("#tab1").append(tr)
							//console.log(tr)
							
							
							/* JS变量基本用法
							var关键字
							 var id :表示定义一个变量名称为ID，该变量相当于在全局范围内声明了一个变量
							 该变量声明没有作用域的概念（随处可用）
							 弊端：由于没有作用域的规定，导致变量使用混乱
							 
							 let关键字
							 从新版本的JS开始，兼容支持let，该关键字的用法与var一样，但是有作用域的范围，更加通用
							 
							 const关键字
							 该关键字用来标识常量，该数据不变
							 */	
						}
					}
				})
				
				
				
				
				
				
				
				
			})
		</script>
		
	</head>
	<body>
		<!-- 准备一个表格，展现user的数据 -->
		<table id="tab1" border="1px" width="80%" align="center">
			<tr align="center" height="60px">
				<th colspan="5">
					<h1>用户列表</h1>
				</th>
			</tr>
			<tr align="center" height="60px">
				<th>编号</th>
				<th>名称</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
			
			<!-- <tr align="center" height="60px">
				<th>1</th>
				<th>黑熊精</th>
				<th>3000</th>
				<th>男</th>
				<th></th>
			</tr>
			<tr align="center" height="60px">
				<th>2</th>
				<th>孙悟空</th>
				<th>500</th>
				<th>男</th>
				<th></th>
			</tr> -->
		</table>
		
		
		
	</body>
</html>
